<template>
  <div class="container px-4">
    <div class="font-weight-bold app-hv-center py-3 app-font-18 app-bb-1px-l3">
      <div class="app-absolute app-l-2">
        <i class="el-icon-house" /></div>教育服务
    </div>
    <div class="app-font-22 font-weight-bold py-5">
      中小学教师资格考试成绩查询
    </div>
    <div class="app-font-18 mt-2">
      姓名
    </div>
    <div class="pt-4 pb-6 app-bb-1px-l3">
      <input type="text" placeholder="请输入姓名查询">
    </div>
    <div class="app-font-18 mt-2">
      证件号码
    </div>
    <div class="pt-4 pb-6 app-bb-1px-l3">
      <input v-model="idNum" type="text" placeholder="请输入证件号码">
    </div>
    <div class="py-2 mt-8">
      <el-button :disabled="!idNum" :style="{background: !idNum? '#f3cdcf' : '#c40311'}" class="app-fill-width py-3 app-font-18" type="danger" @click="handleLogin">查询</el-button>
    </div>
    <div class="py-2">
      <el-button class="app-fill-width py-3 app-font-18" plain>直接查询本人</el-button>
    </div>
    <div class="mt-4 px-4 py-4 app-round-2" style="background: #f7f7f7;color: #adadad;font-size: 3.381333333333333vw;line-height: 20px;">
      <div>温馨提示：</div>
      <div>如考生姓名中带有点，请复制使用这个标准的点符号(·)，点的两边不能再有空格。</div>
      <div>如有所列孤僻字请粘贴使用，例：䶮、仝、㼆。</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      idNum: ''
    }
  },
  mounted() {
    document.title = '中小学教师资格考试成绩查询'
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },

    handleLogin() {
      this.$router.push('/page')
    }
  }
}
</script>

<style lang="scss">
.container {
  margin: 0 auto;
  max-width: 800px;
}
input {
  background: transparent;
  border: 0 !important;
    padding: 0;
}
input:focus {
  background: transparent;
  border: 0 !important;
  outline: 0;
  padding: 0;
}
input::placeholder {
  font-size: 18px;
  color: #ccccd6;
}
</style>
